// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path')
// const defaultSettings = require('./src/settings.ts')
// 性能分析工具
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin
// 是否生产环境
const isProd = process.env.ENV === 'production'
// 定义打包排除
const externals = isProd
  ? {
      // key: value
      // '库名': '替代变量符' // 变量符由插件库官方决定
      vue: 'Vue',
      'element-ui': 'ELEMENT',
      xlsx: 'XLSX'
    }
  : {}
// 注入 CDN
const cdn = isProd
  ? {
      css: [
        'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 提前引入elementUI样式
      ], // 放置css文件目录
      js: [
        'https://unpkg.com/vue/dist/vue.js', // vuejs
        'https://unpkg.com/element-ui/lib/index.js', // element
        'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx 相关
        'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js' // xlsx 相关
      ] // 放置js文件目录
    }
  : { css: [], js: [] }
// 如果端口设置成 80,
// 需要使用管理员权限
// 例如 Mac: sudo npm run / sudo yarn
const devServerPort = process.env.PORT || 9527 // TODO: 从 settings.ts 中获取
// const mockServerPort = 9528 // TODO: 从 settings.ts 中获取
const name = '人资管理系统-ts版' // TODO: 从 settings.ts 中获取

module.exports = {
  publicPath:
    process.env.NODE_ENV === 'production'
      ? '/vue-typescript-admin-template/'
      : '/', // 访问根地址
  lintOnSave: process.env.NODE_ENV === 'development', // 开发模式下关闭校验
  productionSourceMap: false,
  // 开发配置
  devServer: {
    port: devServerPort,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 添加代理配置
    proxy: {
      // key: value 指定需要代理的 基础路径
      '/api': {
        target: 'http://localhost:3000/',
        // target: 'http://ihrm-java.itheima.net/',
        // target: 'http://192.168.106.40:3000/', // 真实代理的地址
        changeOrigin: true // 是否跨域
      }
    }
  },
  pwa: {
    name: name,
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: path.resolve(__dirname, 'src/pwa/service-worker.js')
    }
  },
  // 插件配置
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, 'src/styles/_variables.scss'),
        path.resolve(__dirname, 'src/styles/_mixins.scss')
      ]
    }
  },
  // 打包配置
  configureWebpack: {
    // 添加打包性能分析指令
    plugins: [new BundleAnalyzerPlugin()],
    // 排除打包
    externals
  },
  chainWebpack(config) {
    /*
      provide the app's title in html-webpack-plugin's options list so that
      it can be accessed in index.html to inject the correct title.
      提供应用程序的标题在 html-webpack-plugin 的选项列表，以便
      可以在 index. html 中访问它来注入正确的标题。
      https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
    */
    config.plugin('html').tap(args => {
      args[0].title = name
      args[0].cdn = cdn
      return args
    })

    // 可以提高首屏速度，建议开启预加载
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        // 忽略 runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])

    // 页面多的时候，会造成太多无意义的请求
    config.plugins.delete('prefetch')

    /*
        https://webpack.js.org/configuration/devtool/#development
        Change development env source map if you want.
        The default in vue-cli is 'eval-cheap-module-source-map'.
        如果需要，可以更改 .env.development 文件配置。
        Vue-cli脚手架 中的默认值是‘ eval-cheap-module-source-map’。
        config
          .when(process.env.NODE_ENV === 'development',
            config => config.devtool('eval-cheap-source-map')
          )
    */
    config.when(process.env.NODE_ENV !== 'development', config => {
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // 只打包最初依赖的第三方
          },
          elementUI: {
            name: 'chunk-elementUI', // 将 elementUI 拆分为一个包
            priority: 20, // 重量需要大于 libs 和应用程序，否则它将被打包成 libs 或应用程序
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 为了适应 cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: path.resolve(__dirname, 'src/components'),
            minChunks: 3, //  最小公共数
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
      // https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
      config.optimization.runtimeChunk('single')
    })
  }
}
